.ios {
  @duration: 400ms;
  
  .ltr({
    .page-previous {
      transform: translate3d(0%, 0, 0);
      opacity: 0;
    }
    .page-next {
      transform: translate3d(0%, 0, 0);
      opacity: 0;
    }
  });

  .router-transition-css-forward {
    // in
    .page-next {
      // From next to current
      animation: ios-page-in @duration forwards;
      &:before {
        animation: ios-page-no-animation @duration forwards;
      }
    }
    // out
    .page-current {
      // From current to previous
      animation: ios-page-out @duration forwards;
      &:after {
        animation: ios-page-no-animation @duration forwards;
      }
    }
    
  }
  .router-transition-css-backward {
    // in
    .page-previous {
      // From previous to current
      animation: ios-page-in @duration forwards;
      &:after {
        animation: ios-page-no-animation @duration forwards;
      }
    }

    // out
    .page-current {
      // From current to next
      animation: ios-page-out @duration forwards;
      &:before {
        animation: ios-page-no-animation @duration forwards;
      }
    }
    
  }

}


@keyframes ios-page-no-animation {
  from {
  }
  to {
  }
}

@keyframes ios-page-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes ios-page-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

